<template>
	<div class="cxo-index" v-if="data">
		<div class="index-top layout pl30rem pr30rem">
			<!-- <div class="site">
				<span class="fs32rem white">东莞</span>
				<i class="iconfont icon-xia fs24rem white"></i>
			</div> -->
			<div class="search-mask" @click="toSearch"></div>
			<search-bar class="flex_1" :searchType="true"/>
			<inform></inform>
		</div>
		<section class="index-banner">
			<swiper :data="bannerA" img-key="adv_image" imgLink="adv_url" :options="bannerCOptions" typeLink="aaa" wh="h_380">
			</swiper>
		</section>
		<section class="nav border-b20">
			<ul class='pb20'>
		     	<li v-for="(item, index) in data.nav" class="mt20 fs14rem" :style="{ backgroundImage:'url(' + img_url + item.logo + '?x-oss-process=image/resize,m_pad,w_166,h_166)' }" @click="jumpForDetail(item)">
		        	{{ item.nav_title }}
		        </li>
		    </ul>
		</section>
		<section class="main_banner-father pr40rem pl40rem">
			<h3 class="white align-center pt45rem pb45rem fs40rem">品牌推荐</h3>
			<div class="main_banner">
				<swiper :data="bannerB" img-key="brand_ads" img-link="goods_id" status-link="status=2" :options="bannerAOptions"  wh="w_370,h_510"> </swiper>
			</div>
		</section>
		<section class="rob pl30rem pr30rem pb80rem border-b20" v-if='bannerC.length > 0'>
			<div class="rob-title layout pt25 pb25 ">
				<h3 class="fs34rem bold">即将上线</h3>
				<router-link tag="p" to="/ordering/detail/more-detail/1" class="c999 fs24rem">查看更多<i class="iconfont icon-right2 ml10rem fs24rem"></i></router-link>
			</div>
			<swiper :data="bannerC" img-key="pic_cover_mid" img-link="goods_id" status-link="status=1" :options="bannerBOptions" timeType="ty_starttime"  wh="w_276,h_276">
			</swiper>
		</section>
		<section class="recommend">
			<div class="recommend-title pt25 pb25 pl30rem pr30rem">
				<h3 class="fs34rem bold">更多推荐</h3>
			</div>
			<ul class="recommend-content pb100rem layout flex-w pl30rem pr30rem">
				<router-link tag='li' :to="'/detail/experience-detail/' + item.goods_id + '?status=2'" class="mb50rem"  v-for="item in recommand" :key="item.recommend_id">
					<img  class="block auto responsive-img" alt="" :src="img_url + item.pic_cover+'?x-oss-process=image/resize,m_pad,,w_332,h_352'">
					<p class="c333 fs30rem bold mt20rem mb20rem ellipsis">{{item.goods_name}}</p>
					<div style="min-height:2rem;">
   						<p class="white pt5rem pb5rem pr10rem pl10rem mr10rem bg-red fs20rem radius" style="display: inline-block;" v-if="item.brand_name">{{ item.brand_name }}</p>
    				</div>
					<div class="layout">
						<strong class="mr15rem fs34rem red bold">￥{{item.price}}</strong><del class="fs20rem c999">原价:{{item.market_price}}元</del>
						<span class="fs24rem c53">限量{{item.ty_winners}}份</span>
					</div>
					<div class="layout">
						<strong class="fs18rem c38">预约倒计时</strong>
						<countdown :data="item.count_down" :type="countdownType"/>
					</div>
					<!-- <button class="bg-red radius-10 white pl35rem pr35rem pt10rem pb10rem auto w92 mt20rem">预约体验</button> -->
				</router-link>
			</ul>
		</section>
		<div class="iosWXmini" v-if='mini' @click=" mini = false ">
		    <img src="../../assets/startImg.gif" alt="">
		</div>
	</div>
</template>

<script>
	import { getHome, getRecommand } from "@/api/home";
	import Swiper from '@/components/Swiper';
	import SearchBar from '@/components/Search-bar';
	import Countdown from "@/components/Countdown";
	import Inform from "@/components/Inform";
	import { iosapp,loginJIM,randomWord,initJIM } from "@/utils";
	export default{
		components: {
			Swiper,
			SearchBar,
			Countdown,
			Inform,
		},
		data()
		{
			return{
				bannerA       : [],
				bannerB       : [],
				bannerC       : [],
				data          : [],
				recommand     : [],
				urlToken      : this.$route.query.token,
				urlUid        : this.$route.query.uid,
				urlMobile     : this.$route.query.mobile,
				user_img      : this.$route.query.headimgurl,
				showApp       : window.sessionStorage.getItem('isapp'),
				token         : window.localStorage.getItem('token'),
				img_url       : process.env.IMG_URL,
				countdownType : true,
				mini          : false,
				last          : '',
				bannerAOptions:{
					loop : true,
				    autoplay:{
				    	delay: 2500,
				    	disableOnInteraction: false,
				    },
					effect: 'coverflow',
					centeredSlides: true,
				    slidesPerView: 2,
				    autoplayDisableOnInteraction: false,
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
					coverflowEffect: {
						rotate: 0,// 旋转的角度
						stretch: 10,// 拉伸   图片间左右的间距和密集度
						depth: 160,// 深度   切换图片间上下的间距和密集度
						modifier: 2,// 修正值 该值越大前面的效果越明显
						slideShadows : false// 页面阴影效果
					}
				},
				bannerBOptions:{
					slidesPerView :'auto',
					loopedSlides: 'auto',
					spaceBetween   : 8,
					autoplay: {
						delay: 5000,
					},
				},
				bannerCOptions:{
					slidesPerView :'auto',
					loopedSlides: 'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
				}
			}
		},
		created()
		{
			this.loadData();
		},
		mounted()
		{
			// loginJIM('13725713996','jiguang520')
		},
		methods:
		{
			loadData()
			{
				this.getToken();
				this.loadRecommand();
				this.loadHomeData();
				this.wechatMini();
				this.keyword = this.keywords;
			},
			loadHomeData()
			{
				getHome('1').then(res => {
					this.last = res.data.nav.length - 1;
					this.data = res.data;
					this.bannerA = res.data.banner;
					this.bannerB = res.data.brand;
					this.bannerC = res.data.come_goods;
				})
			},
			loadRecommand()
			{
				var params = {
					type:'1'
				}
				getRecommand(params).then( res=> {
					this.recommand = res.data;
				})
			},
			getToken()
			{
				if(this.showApp == '1') return;
				
				if(this.token) return;	
				
				if (window.__wxjs_environment === 'miniprogram') return;

				var data = {
					token    : this.urlToken,
					uid      : this.urlUid,
					mobile   : this.urlMobile,
					user_img : this.headimgurl,
				}
				if(this.urlToken && this.urlUid){
					this.$store.dispatch("login", data);
				}
				else{
					location.href = 'https://fish.qidongwx.com/service/Thirdlogin/wchatPublicLogin';
				}
 			},
			toSearch()
			{
				this.$router.push('/search');
			},
			wechatMini()
			{
				var u = navigator.userAgent;
               	if (u.indexOf('iPhone') > -1 || u.indexOf('iPad') > -1 || u.indexOf('ios') > -1 ){
               		var str = 1;
               		
               		if (window.__wxjs_environment === 'miniprogram' && str == 1) {
               			this.mini = true;
				    };
               	}else{
                   return false
               	}
			},
			jumpForDetail(item)
			{
				switch(item.nav_url)
				{
					case '-5':
						this.$router.push('/detail/nav-detail/' + item.nav_url +'?type=1');
						return new Promise(() => {});
					case '-2':
						this.$router.push('/detail/help-list?' + 'type=-2');
						return new Promise(() => {});
					case '-3':
						this.$router.push('/detail/free-list?' + 'type=-3');
						return new Promise(() => {});
					case '-4':
						this.$router.push('/detail/share-list?' +'type=-4');
						return new Promise(() => {});
					case '-6':
						this.$router.push('/detail/nav-detail/' + item.nav_url +'?type=1');
						return new Promise(() => {});
					case '1':
						this.$router.push('/more?type=1');
						return new Promise(() => {});
				}
			},
		},
		watch: {
			'$route'()
			{
				this.getToken();
			}
		}
	}
</script>

<style lang="less">
	.cxo-index{
		.index-top{
			height: 90/28rem;
			background: #ff0036;
			.inform{
				color: #fff;
				position:relative;
				.hint{
					background: #fff;
					color: #ff0036;
					font-size: 20/28rem;
					text-align:center;
					width: 50/28rem;
					height: 25/28rem;
					line-height: 25/28rem;
					position: absolute;
					top:-5/28rem;
					right: -15/28rem;
					border-radius: 15/28rem;
				}
				i{
					font-size: 52/28rem;
				}
			}
		}
		.index-banner{
			height: 380/28rem;
			.swiper-container{
				.swiper-wrapper{
					height: 380/28rem;
					img{
						width: 100%;
						height: 100%;
						display: block;
						object-fit:cover;
					}
				}
			}
		}
		.nav{
			ul{
			    display: flex;
			    justify-content: flex-start;
			    flex-wrap: wrap;
			    li{
			      	text-align: center;
			      	width: 20%;
			     	margin-top: 40/28rem;
			        font-size: 26/28rem;
			        color: #333;
			        padding-top: 100/28rem;
			        display: block;
			        background-position: top center;
			        background-size: 86/28rem;
			        background-repeat: no-repeat;
			    }
		  	}
		}
		.main_banner-father{
			background: url('../../assets/bannerB_bg.png') no-repeat center center / 100%;
			height: 750/28rem;
		}
		.main_banner{
			// height: 510/28rem;
			.swiper-container{
				.swiper-slide{
					width: 370/28rem;
					img{
						display: block;
						width: 100%;
						height: 510/28rem;
						object-fit: cover;
					}
				}
				.swiper-pagination-bullets{
				    bottom: 0px !important;
			        position: relative !important;
				}
				.swiper-pagination{
					margin-top: 40/28rem;
				}
			}
		}
		.rob{
			.swiper-container{
				.swiper-wrapper{
					width: 100%;
				}
				.swiper-slide{
					width: 40% !important;
					text-align: center;
					box-shadow: 2px 1px 2px 0 #ddd;
					margin-bottom: 10/28rem;
					border: 1px solid #f5f5f5;
					a{
						display: block;
						border-radius: 2px;
    					overflow: hidden;
					}
					strong{
						display: block;
					}
				}
			}
			.count-down{
				padding-left: 25/28rem;
				padding-right: 25/28rem;
				.day{
					color:#f44336;
					font-size: 20/28rem;
				}
			}
		}
		.recommend{
			ul{
				li{
					width: 48%;
					img{
						height: 350/28rem;
					}
					.count-down{
						.day{
							font-size: 20/28rem !important;
						}
						span{
						    background-color: #383838;
						}
						strong{
							i{
								background-color: #383838;
							}
						}
					}
					button{
						border-radius: 8/28rem;
					}
				}
			}
		}
		.search-mask{
			height: 3.2rem;
			width: 68%;
			position: absolute;			
			left:19%;
			z-index:2;
		}
		.iosWXmini {
		  	position: absolute;
		  	top: 0;
		  	left: 0;
		  	z-index: 10000;
		  	display: none;
		  /* 水平居中*/
		  	-webkit-box-align: center;
		  	-moz-box-align: center;
		  	-ms-flex-pack: center;
		  /* IE 10 */
		  	-webkit-justify-content: center;
		  	-moz-justify-content: center;
		  	justify-content: center;
		  /* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/
		  /* 垂直居中 */
		  	-webkit-box-pack: center;
		  	-moz-box-pack: center;
		  	-ms-flex-align: center;
		  /* IE 10 */
		  	-webkit-align-items: center;
		  	-moz-align-items: center;
		  	width: 100%;
		  	height: 100%;
		  	background: rgba(0, 0, 0, 0.5);
		}
		.iosWXmini img {
		  	width: 16.07142857rem;
		  	height: 18.39285714rem;
		}
	}
</style>